【第1564期】Vue构建工具的设计与实现

查看原文

其他

【第1564期】Vue构建工具的设计与实现

汪楠前端早读课 2019-06-17

前言

今日早读文章由京东@Mu小南投稿分享。

@汪楠，京东用户体验设计部-前端开发部，前端工程师

正文从这开始～～

简介：想了解Vue技术栈构建工具设计思路吗？一个简易好用的构建工具都是为了提高生产效率，用工具解放生产力，关注业务开发。

在前端界React、Vue、Angular三足鼎立的形式下，我们也针对Vue技术栈设计了一套构建工具解决方案。力求做到开箱即用，又可以根据实际的项目需求插件式的配置项目模版工程，包含开发、调试、上线整个流程的功能。本文主要讲一下整体的设计思路。

一般Vue2.0技术栈的构建工具需要具备以下几个功能：

脚手架工具
Webpack模版
核心组件库
辅助功能

脚手架工具

从 Vue-cli 的整体设计可以学习到cli构建工具和模版相分离的设计思路，我们可以通过命令行，选择匹配不同的模版下载，用于不同的开发需求。分开维护的好处是，模版的变动更新，并不需要用户端重新发布和安装cli构建工具，并且也保证了一致性，当我们有发现模版bug，修复后，也能及时同步远端。

如上图所示，将不同场景的可直接运行的webpack模版代码放在 git 上维护，通过 nodejs 命令行交互方式获取用户配置项目信息和插件信息，通过 metadata 模版渲染方式，将模版和自定义部分相结合，最后输出用户需要的模版工程代码。

先了解一下需要的第三库：

commander.js，可以自动解析命令参数，用于处理用户输入的命令。
download-git-repo，下载并提取git仓库，用于下载模版。
Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
ora，下载过程loading动画效果。
chalk，可以给终端字体颜色。
log-symbols，在终端上显示对勾或者叉图案。
latest-version，获取库最新版本号。
metalsmith，静态网站生成器，批量处理模版。
handlebars.js，模版引擎，将用户提交的动态信息填充到文件中。

脚手架搭建第一步：commander.js命令行界面

第一步：通过commander.js实现命令init项目

program.usage('<name>').parse(process.argv)
let projectName = program.args[0]
if(!projectName){
    program.help()
    return
}

mycli init projectName也许你觉得命令太长，想短一点，也可以支持m2 init projectName。因为 commander支持git风格的子命令处理，格式是[command]-[subcommand]，例如：

mycli init => mycli-init
m2 init => m2-init

所以我在原先的mycli-init.js文件基础上新增加了一个m2-init.js文件。

脚手架搭建第二步：Inquirer.js交互

通过Inquirer.js命令行问答交互方式配置项目信息和插件信息，在myCli中，除了一些基本信息外，还需要选择需要提前打包的第三库，以及一些开发中常用的功能。这里设置的参数名字也是后面模版生成时候占位的名字。

 const answer = await  new Promise((resolve,reject)=>{
        if(projectRoot != '.'){
            fs.mkdirSync(projectRoot);
        }
        return resolve( inquirer.prompt([
            {
                name:'projectName',
                message:'项目名称',
                default:'mycli-init'
            },
            ...
        ]))
    })

脚手架搭建第三步：download-git-repo下载模板

通过 download-git-repo去git库下载模版集合。这里的dev分支存储了vue、vuex、skeleton、typescript四套模版。这里是统一全部都下载下来，然后根据命令行交互的信息进行筛选和处理。

module.exports = function(target){
    target = path.join(target || '.','.download-temp')
    return new Promise (function(resolve,reject){
        const url = 'direct:https://github.com/'
        const spinner = ora('正在下载模版')
        spinner.start()
        download(url,target,{clone:true},(err)=>{
            if(err){
                spinner.fail()
                reject(err)
            }else{
                spinner.succeed()
                resolve(target)
            }
        })
    })
}

脚手架搭建第四步：metalsmith、handlebars生成模板

generator.js 处理所有信息输出最终工程模版。传入metadata数据、下载的临时文件夹地址、最终模版生成的目录地址。通过 metalsmith 和 handlebars 处理模版，删除不需要的文件，填入模版动态数据。

const res = await generator(context.metadata,context.downloadTemp,dest);

因为download的模版是一个集合，那么我们怎么根据Inquirer.js选择的工程信息匹配到对应的模版，这里还需要一个template.ignore文件。该文件配置了文件查找的匹配规则，

{{#if Skeleton}}
skeleton/**
skeleton/.*
{{else if TypeScript}}
ts/**
ts/.*
{{else if vuex}}
vuex/**
vuex/.*
{{else if vue}}
vue/**
vue/.*
{{/if}}

return new Promise((resolve,reject)=>{
    const metalsmith = Metalsmith(process.cwd()).metadata(metadata).clean(false).source(src).destination(dest);
    //判断是否存在ignore文件
    const ignoreFile = path.join(src,'templates.ignore');
    if(fs.existsSync(ignoreFile)){
        metalsmith.use((files,metalsmith,done) =>{
            const meta = metalsmith.metadata();
            const ignores = Handlebars.compile(fs.readFileSync(ignoreFile).toString())(meta)
            .split('\n').filter(item=>!!item.length)
            //删除文件
            done()
        }).build(err=>{
            metalsmith.use((files, metalsmith,done) => {
                const meta = metalsmith.metadata()
                Object.keys(files).forEach(fileName => {
                    if(fileName.indexOf('/src/') == -1){ //忽略业务代码
                        let t = files[fileName].contents.toString()
                        files[fileName].contents = new Buffer(Handlebars.compile(t)(meta))
                    }
                })
                done();
            }).build(err => {
                //移动文件
            })
        })
    }
})

脚手架搭建第五步：ora、log-symbols美化

通过ora、chalk 和 log-symbols 美化脚手架

在下载模版时候，或者获取库版本时候，都会比较慢，如果终端没有给出任何信息似乎体验上会比较差，在下载模版的时候，增加了 ora 代码：

const spinner = ora('正在下载模版')
spinner.start()
download(url,target,{clone:true},(err)=>{
    if(err){
        spinner.fail()
        reject(err)
    }else{
        spinner.succeed()
        resolve(target)
    }
})

在最终工程模版生成的时候，可以给出字体颜色表示是否成功，例如：

console.log(logSymbols.success,chalk.green('创建成功:)'));
console.log(logSymbols.error,chalk.red(`创建失败：${err.message}`));

Webpack 模版

有了命令行工具，我们还需要Webpack工程模版。与时俱进，当然需要一些新的变化，比如Webpack4.0和 Babel7。

Webpack4.0

将Webpack从3.x升级到了4.x。简单罗列一下升级中需要注意的点：

推荐使用node版本 >=8.9.0，在使用时候可以有更好的体验
借鉴了parcel零配置构建思想，新增了模式配置:mode，可选值是production 和 development。mode不可缺省，需要二选一：

production 模式：

默认提供所有可能的优化，如代码压缩/作用域提升/tree-shaking 等

不支持watching process.env.NODE_ENV 的值不需要再定义，默认是 production

development 模式：

主要优化了增量构建速度和开发体验

process.env.NODE_ENV的值不需要再定义，默认是development

在Webpack配置文件中，我们往往需要拿到当前的npm命令执行的模式，可以如下拿到参数值：

"dev": " webpack-dev-server --mode development   -d --open --hide-modules --progress",
 "build": "webpack --mode production --hide-modules --progress",
 "upload": "webpack --mode production --env.upload --hide-modules --progress",

module.exports = (env,argv)=> {
    if(argv.mode === 'production'){
       //判断是否是生产环境
    }
    if(env && env.upload){
      //判断是否是编译上传
    }
}

在Webpack打包优化方面，对于第三方的依赖库，例如vue、vuex、vue-router等我们会单独提前预先 Dllplugin 打包 vendor 文件。那么可以对比一下构建 vendor 的大小和时间。

Webpack3 效果如下：

Webpack4 效果如下：

从打包上看，对于Vue第三方库全家桶，4.x 比 3.x 减少了14%。时间也减少了8%。4.x在打包编译构建速度上做了很大优化，这里就不展开了，对于整体项目构建提升效果是很明显的。

MiniCssExtractPlugin替代 ExtractTextWebpackPlugin，如果还想用 ExtractTextWebpackPlugin，可以下载 next 版本。

Babel7

曾经在做移动端页面的时候，为了使用es6或者es7语法，又要兼容比较低版本的android或者ios等使用场景，我们只能加载完整版本80kb左右的polyfill文件。Babel7真正做到按目标浏览器兼容的浏览器按需加载 polyfill文件。如何做到呢？我们看一下 .babelrc文件。首先配置 babel preset env：将 ES6 的代码转成 ES5 (注意： babel-preset-es2015 已经被废弃了)。设置目标浏览器的范围，设置 useBuiltIns:usage。usage是新特性，可以只打包业务代码中需要转换的polyfill。

{
    "presets": [
        ["@babel/preset-env",
        {
           "modules":false,
           "targets":{
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8","Android >= 4","iOS >= 8"]
           },
           "useBuiltIns":"usage"

        }]
    ],
    "plugins": [
        ["@nutui/babel-plugin-separate-import",{"style":"css"}],
        "@babel/plugin-syntax-dynamic-import"

    ]
}

测试源码如下：

 let m = [3,4];
 console.log([...this.spread,...m]);
 let obj = Object.assign({},this.obj); 
 for(let a of m){
       console.log(a);
  }

使用useBuiltIns:usage打包：

这结果是不是很让人兴奋。

模版集合

当我们搭建完Webpack4的工程模版后，为了进一步降低用户的使用的难度，从项目的实践中总结和抽取比较完整的模版方案:Vue、Vuex、TypeScript、Skeleton 四套模版。目前暂时支持这些，后续考虑加入活动页模版、PC端模版等

核心组件库NutUI2.0

对于一个Vue技术栈来说，少不了实用的组件库。现在业界有很多优秀的组件iView、element等。不过我们团队做的NutUI2.0 Vue组件库也同样优秀，不仅服务于部门内部，也服务于公司的其他部门团队。目前有30+数量的组件，大多数来源于京东app、京东me等使用场景的实际项目积累和沉淀。基于京东APP 7.0 视觉规范。在项目中，推荐使用按需加载方式调用组件代码，减小打包体积。同时支持组件内挂载，也支持全局挂载。

import { DatePicker,Button,Rating } from '@nutui/nutui';
...
export default {
    data(){
        return{
        }
    },
    components: {
        'nut-datepicker':DatePicker,
        'nut-button':Button,
        'nut-rating':Rating
    }
}

import { Cell,Dialog } from '@nutui/nutui';
Vue.use(Cell);
Vue.use(Dialog);

辅助功能

我们团队开发了许多提高效率插件和功能，以增强开发体验。

一键上传
carefree：webpack插件，开发阶段自动编译上传测试服务器，提供二维码真机调试
smock：webpack插件，开发阶段基于Swagger的自动化mock假数据
skeleton：利用骨架屏vue组件和vue-server-reander 手写注入骨架屏html和css

小结

最后通过脚手架工具、Webpack模版、核心组件库NutUI2.0和辅助功能四个方面的讲解，大家对Vue2.0构建工具有所了解吧。整体的设计就如下图：

整体的设计学习借鉴了很多业界前辈分享的经验，结合项目中的实践的经验，给出一套解决方案，希望能给大家一点启发和帮助。

欢迎使用和关注

NutUI2.0 地址：http://nutui.jd.com/

《鱿鱼游戏2》今天下午四点开播，网友无心上班了，导演悄悄剧透

跟着南通住建局学“朝令夕改”

宾曰语云被法学教授投诉：严重侵权，“违法犯罪”！

穿了跟没穿一样，胸型赞到爆！天然乳胶，性感到让男人腿软！

当“上帝”变为“老天爷”